<template>
	<view class="icon_cart_item">
		<image class="icon" :src="icon" alt=""></image>
		<view class="right_con">
			<view class="title">{{title}}</view>
			<view v-if="subTitle" class="sub_title">{{subTitle}}</view>
			<view v-if="count" class="count">{{count > 99 ? '99+' : count }}</view>
			<view class="bottom between" v-if="type ===  'between'">
				<view class="text1">{{text1}}</view>
				<view class="text2">{{text2}}</view>
			</view>
			<view class="bottom left" v-if="type ===  'left'">
				<view class="text1">{{text1}}</view>
				<view class="text2">{{text2}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			icon: String,
			title: String,
			subTitle: String,
			count: Number,
			type: String,
			text1: String,
			text2: String
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.icon_cart_item{
	font-family: PingFang SC;
	
	width: 705rpx;
	background: #FFFFFF;
	border-radius: 27rpx;
	padding: 37rpx 27rpx;
	box-sizing: border-box;
	display: flex;
	margin-bottom: 20rpx;
	.right_con{
		position: relative;
		flex: 1;
	}
	.title{
		font-weight: 500;
		font-size: 32rpx;
		color: #000000;
		line-height: 40rpx;
	}
	.sub_title{
		font-weight: 500;
		font-size: 32rpx;
		color: #000000;
		line-height: 40rpx;
	}
	.icon{
		width: 93rpx;
		height: 93rpx;
		margin-right: 23rpx;
	}
	.count{
		position: absolute;
		top: 0;
		right: 0;
		width: 33rpx;
		height: 33rpx;
		background: #F23A54;
		border-radius: 50%;
		font-weight: 600;
		font-size: 20rpx;
		color: #FFFFFF;
		line-height: 33rpx;
		text-align: center;
	}
	.bottom{
		font-weight: 400;
		font-size: 27rpx;
		color: #616E87;
		line-height: 19rpx;
		margin-top: 27rpx;
		
		display: flex;
	}
	.bottom.between{
		justify-content: space-between;
	}
	.bottom.left{
		.text2{
			margin-left: 79rpx;
		}
	}
}
</style>
